import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { Animated } from 'react-native';
// tabs
import TabsButtom from './components/tabsButton';

// 测试页面
import TestPage from './pages/test';
//tabs 滑动
import TopTab from './pages/example';
// 轮播
import MainPage from './pages/main';

import SwiperPage from './pages/swiperPage';

const { multiply } = Animated;
// stackConfig 配置
const stackConfig = {
	defaultNavigationOptions: {
		// 头部去掉
		headerShown: null, // 默认返回去掉
		// onTransitionStart: (route) => {
		//   console.log('开始动画');
		// },
		// onTransitionEnd: (route) => {
		//   console.log('结束动画');
		// },
		// cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
		gestureEnabled: true,
		gestureDirection: 'horizontal',
		cardStyleInterpolator: (params) => {
			const { current, next, inverted, layouts } = params;
			return {
				cardStyle: {
					transform: [
						{
							translateX: current.progress.interpolate({
								inputRange: [0, 1],
								outputRange: [layouts.screen.width, 0],
								extrapolate: 'clamp',
							}),
						},
						{
							translateX: next
								? multiply(
										next.progress.interpolate({
											inputRange: [0, 1],
											outputRange: [0, layouts.screen.width * -1],
											extrapolate: 'clamp',
										}),
										inverted
								  )
								: 0,
						},
					],
				},
			};
		},
	},
	detachInactiveScreens: true,
	mode: 'modal',
};

const Routes = createStackNavigator(
	{
		Home: {
			screen: TabsButtom,
		},
		Test: {
			screen: TestPage,
		},
		TopTab: {
			screen: TopTab,
		},
		SwiperPage: {
			screen: SwiperPage,
		},
	},
	{
		...stackConfig,
	}
);
export default createAppContainer(Routes);
